<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档中心</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../CSS/media.css">
    <style>
        .Modular {
            width: 100%;
            margin: 0px 0px 10px 0px;
            padding: 15px 0px;
            background: #fff;
        }
        .Modular>div{
            width: 80%;
            margin: auto;
        }
        .layui-card-body{
            padding:10px !important;
        }
        .layui-elem-quote{
            background: unset!important;
            font-size: 16px;
            font-weight: bold;
            color: #868686;
            border-left: 5px solid #1E9FFF;
            line-height: 0px;
            margin-left: 10px;
        }
        .box{
            height: 240px;
            box-shadow: 0px 0px 6px #aaa;
            border: 1px solid #e5e5e5;
            /* background-color: #2F4056; */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer; 
        }
        .boxCenter{
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }
        .boxCenter>img{
            display:block;
            width:70px;
            height:70px;
            margin: 0 auto;
        }
        .boxCenter>div{
            font-size: 18px;
            font-weight: 700;
            width:100%;
            text-align: center;
            margin-top: 5px;
        }
        .docTitle{
            font-size: 44px;
            font-weight: 700;
            background: linear-gradient(to right, #41b5f3, #1361dc);
            -webkit-background-clip: text;
            color: transparent;
            text-align: center;
            margin: 40px 20px;
        }
        .docSearch{
            text-align: center;
            margin:20px auto;
            width: 550px;
        }
        .docSearch button{
            width: 50px;
            height: 50px;
            padding:0px;
            background-size:50px 50px;
            background-image:url('../../static/IMG/Common/search.png')
        }
        .docSearch input {
            width:500px;
            height: 50px;
        }
        .s_btn {
            width: 40%;
            /* float: right; */
            position: relative;
            margin: 0 auto;
            margin-top: 15px;
        }

        .s_btn i {
            font-size: 38px;
            color: #fff;
            position: absolute;
            cursor: pointer;
            background: #1E9FFF;
            text-align: center;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            padding: 4px;
        }

        .s_btn input {
            height: 50px;
            background: #f1f1f1;
            border: none;
            font-size: 16px;
            width: 80%;
            display: inline-block;
        }
    </style>
</head>
<body style="width: 100%;padding: 0px; background-color: #fff;">
<div class="Modular">
<div class="layui-row">
    <div class="docTitle">欢迎使用三维地理信息服务平台文档中心</div>
    <div class="s_btn">
        <input type="text" name="title" placeholder="请输入查询内容" autocomplete="off" class="layui-input search">
        <i class="layui-icon ">&#xe615;</i>
    </div>
    <!-- <div class="layui-row docSearch">
        <input type="text" name="docinfo" required lay-verify="required" placeholder="请输入查询内容"
               autocomplete="off" class="layui-input layui-col-md6" />
        <button type="button" class="layui-btn layui-col-md6"></button>
    </div> -->

    <!-- <div class="layui-card-header"> -->
        <blockquote class="layui-elem-quote">文档中心</blockquote>
    <!-- </div> -->
    <div class="layui-card-body">
        <div class="layui-row layui-col-space5">
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/Base.png" alt="">
                            <div>新手入门</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/yonghuguanli.png" alt="">
                            <div>用户管理</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/yingyongchuanjian.png" alt="">
                            <div>应用创建</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space5">
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/CreateModel.png" alt="">
                            <div>模板创建</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/Data.png" alt="">
                            <div>数据创建</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-panel">
                    <div class="box">
                        <div class="boxCenter">
                            <img  src="./../../static/IMG/Document/yangshichuangjian.png" alt="">
                            <div>样式创建</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="../../JS/jquery-2.0.3.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            layer.msg(elem.text());
        });
    });
    $('.box').click(function () { 
        var text = $(this).find('.boxCenter>div').text()
        // 获取上一个页面iframe的标签
        $('#view', window.parent.document).attr('src','HTML/Document/DocumentShow.html?text='+text)     
     })
</script>
</body>
</html>